<!--
 * @Author: liuxinye
 * @Date: 2020-05-12 17:28:06
 * @LastEditors: liuxinye
 * @LastEditTime: 2020-05-25 17:30:17
 * @Description: 
 -->
<!DOCTYPE html>
<html>
    <head>
       <title>滚动条设置详解</title>
       <style>
          #scroll_container{
              height: 500px;
              width: 500px;
              overflow-y: scroll;
              padding: 50px;
          }
          .scroll_item{
              height: 200px;
              width: 500px;
              margin-top: 20px;
              background-color: aquamarine;
              display: flex;
              align-items: center;
              justify-content: center;
          }
       </style>
    </head>
    <body>
       <div  id="scroll_container">
           <div id="item1" class="scroll_item">
               <span>1</span>
           </div>
           <div id="item2" class="scroll_item">
                <span>2</span>
            </div>
            <div id="item3" class="scroll_item">
                <span>3</span>
            </div>
            <div id="item4" class="scroll_item">
                <span>4</span>
            </div>
            <div id="item5" class="scroll_item">
                <span>5</span>
            </div>
       </div>
       <button onclick="addItem()">添加一个元素</button>
       <!-- <input type="number" placeholder="请输入要滚动到的元素index" style="width: 200px;"/>
       <button onclick="scrollToElement()">滚动到指定元素</button>
       <button onclick="scrollToBottom()">滚动到底部</button>
       <button onclick="scrollToTop()">滚动到顶部</button> -->

    </body>
    <script>
        let container=document.getElementById("scroll_container");
       
        // let lastChild=document.getElementById("last");
        let index=5;
        // container.scrollTo(0,container.scrollHeight-container.clientHeight)//IOS 手机 不兼容
        // container.scrollTop=container.scrollHeight-container.clientHeight;
        // console.log(container.scrollHeight-container.clientHeight);
        // console.log(container.clientHeight);//包含padding的高度
        // console.log(container.offsetHeight);//包含padding的高度
        // console.log(container.getBoundingClientRect());//包含padding的高度
        function addItem(){
            index+=1;
            let item=`<div id="${'item'+index}" class="scroll_item">
                            <span>${index}</span>
                        </div>`;
            container.innerHTML+=item;  
            setTimeout(()=>{
                // scrollToIndex();
                scrollToBottom(container);
            })
         }

         function scrollToBottom(containerEl){
              if(!containerEl){
                containerEl=container;
              }
              let dy=containerEl.scrollHeight-containerEl.clientHeight;
              let scrollAnimationFn=doAnimation(dy,300,containerEl);
              let interval=setInterval(()=>{
                scrollAnimationFn(interval)
              },10)
         }
         function scrollToTop(containerEl){
              if(!containerEl){
                containerEl=container;
              }
              let dy=-(containerEl.scrollHeight-containerEl.clientHeight);
              let scrollAnimationFn=doAnimation(dy,300,containerEl);
              let interval=setInterval(()=>{
                scrollAnimationFn(interval)
              },10)
         }
         function scrollToElement(containerEl,el){
            if(!containerEl){
                containerEl=container;
            }
            if(!el){
                let input=document.getElementsByTagName('input')[0];
                let id='item'+input.value;
                if(!input.value){
                    id='item'+index;
                }
                el=document.getElementById(id);
            }
            let scrollAnimationFn=doAnimation(el.getBoundingClientRect().top,300,containerEl);
            let interval=setInterval(()=>{
                scrollAnimationFn(interval)
            },10)
         }
         /**
          * @description: 
          * @param {type} 
          * @return: 
          */
         function doAnimation(dy,duration,el){
              //使用闭包保存变量exe_dy和step等变量(每次动画滚动的距离)
              let exe_dy=0;
              let step=dy/(duration/10);
              return function(interval){
                  exe_dy+=step;
                  if(Math.abs(exe_dy)>=Math.abs(dy)){
                      clearInterval(interval);
                  }
                  el.scrollBy(0,step);
              }
         }
    </script>
</html>